<template>
    <ayjDrawer class="sales-box" :title="'产品库存'" width="50%" ref="ayjDrawerRef" :slotFooter="false"
        @closeFun="handleClose">
        <div ref="containerBoxRef" class="container_box bg_linear">
            <div ref="pointsBoxRef" class="mb5">
                <div class="font_size16 mb5 bold">商品信息</div>
                <div class="shop_card_box">
                    <div class="flex_row mb5 ml5">
                        <div class="font_size16">
                            <span class="font_black8">型号：</span>
                            <span>{{ warehouse_goods_info.item_no }}</span>
                        </div>
                        <div class="ml30 font_size16">
                            <span class="font_black8">总库存：</span>
                            <span>{{ warehouse_goods_info.qty_min_total_str }}</span>
                        </div>
                    </div>
                    <shopCard :goods="goods"></shopCard>
                </div>
            </div>
            <div class="flex_column flex1" :style="{ height: dynamicHeight + 'px', overflowY: 'auto' }">
                <div class="font_size16 bold mt5">仓库分布</div>
                <template v-if="tableList && tableList.length > 0">
                    <div class="table_box mb20" v-for="(item, index) in tableList" :key="index">
                        <div class="flex_row">
                            <div class="font_size14">仓库：{{ item.store_name }}</div>
                            <div class="ml20 font_size14">库存：{{ item.qty_min_str }}</div>
                        </div>
                        <div v-if="item.store_list.spec && item.store_list.spec.length > 0">
                            <el-table :data="item.store_list.spec" style="width: 100%;" row-key="specid" border
                                size="mini" :tree-props="{ children: 'sub', hasChildren: 'hasChildren' }">
                                <el-table-column prop="title" label="名称" sortable>
                                    <template #default="{ row }">
                                        <span class="font_blue">{{ row.title || '无规格' }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="qty_min_str" label="库存量">
                                </el-table-column>
                                <el-table-column prop="qty_min_1" label="操作">
                                    <template #default="{ row }">
                                        <div class="cursor_pointer" v-if="row.qty_min_1_flag == 1">
                                            <span class="font_blue">拆分</span>
                                        </div>
                                        <div class="cursor_pointer" v-else-if="row.qty_min_1_flag == 0 && !row.sub">
                                            <span class="popover-trigger font_red"
                                                @click="popoClick(row, item)">修改</span>
                                            <span class="font_bule ml10" @click="handleFlowClick(row, item)">查看流水</span>
                                        </div>
                                        <div v-else>--</div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </template>
                <empty v-else></empty>
            </div>
        </div>
        <ayjDialog ref="editQtyRef" :title="'修改库存'" width="25%" @closeFun="editQtyCancel" :slotFooter="true">
            <div>
                <el-form ref="formRef" :model="formModel" :rules="objectRules" label-width="60px">
                    <el-form-item label="库存" prop="qty_min">
                        <el-input v-model="formModel.qty_min" placeholder="请输入库存" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="notes">
                        <el-input type="textarea" v-model="formModel.notes" placeholder="请输入备注"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="flex_between">
                    <div></div>
                    <div>
                        <el-button @click="editQtyCancel" size="mini">取消</el-button>
                        <el-button type="primary" @click="editQtySure" size="mini">确定</el-button>
                    </div>
                </div>
            </template>
        </ayjDialog>
        <warehouseFlowDrawer ref="warehouseFlowDrawerRef"></warehouseFlowDrawer>
    </ayjDrawer>
</template>

<script setup>
import { ref, reactive, onMounted, computed, getCurrentInstance, defineProps, defineExpose, watch } from '@vue/composition-api'
import { useDynamicHeight } from '@/hooks/useDynamicHeight'
import { usePurchaseState } from '@/pages/report/hooks/usePurchaseState.js'
import shopCard from '@/components/commV2/ShopCard/index.vue'
import warehouseFlowDrawer from '@/pages/report/purchaseModule/warehouseFlowDrawer.vue'

import https from "@/js/https/Https.js";

const {
    warehouse_goods_info,
    warehouse_goods_list_ls,
    clickGoodsItems,
    warehouseFlow,
    warehouse_flow_info,
    warehouse_flow_shop_info,
    warehouse_flow_list,
    warehouse_flow_list_pfrom,
} = usePurchaseState()

import config from "@/js/conf/Config.js";
import localStore from "@/js/LocalStore.js";

const ayjDrawerRef = ref(null)
const containerBoxRef = ref(null)
const pointsBoxRef = ref(null)
const visible = ref(false)

const { proxy } = getCurrentInstance()
const editQtyRef = ref(null)
// {"qty_min":"100",
// "act":"change",
// "id":"96",
// "notes":"数量",
// "storeid":3,
// "ch":"goods",
// }
const formModel = ref({
    qty_min: '',
    id: '',
    notes: '',
    storeid: '',
    ch: 'goods',
    act: "change",
})

const objectRules = ref({
    qty_min: [
        { required: true, message: '请输入库存', trigger: 'blur' },
        { type: 'number', message: '库存必须为数字', trigger: 'blur', transform: (value) => Number(value) }
    ],
    notes: [{ required: true, message: '请输入备注', trigger: 'blur' }]
})

const editQtyCancel = () => {
    editQtyRef.value.close()
}

const formRef = ref(null)
const editQtySure = async () => {
    const valid = await formRef.value?.validate()
    if (valid) {
        https.getGoodsStoreEdit(formModel.value, back);
        function back(data) {
            if (!data) return;
            if (data.status == 1) {
                proxy.$message.success(data.msg);
                clickGoodsItems()
                editQtyCancel()
            }
        }
    }
}

const goods = computed(() => {
    return {
        gdimg: warehouse_goods_info.value.goods_img_small || '',
        gdname: warehouse_goods_info.value.goods_name || '',
        brand: warehouse_goods_info.value.brands_name || '',
        gd_brand: warehouse_goods_info.value.category_name || '',
        unit_info: warehouse_goods_info.value.unit_str || '',
        goods_no: warehouse_goods_info.value.item_no || ''
    }
})

// 合并数据
const tableList = computed(() => {
    return warehouse_goods_list_ls.value.map(item => {
        let specArr = Array.isArray(item.store_list.spec) ? [...item.store_list.spec] : [];
        if (item.store_list.no_spec) {
            if (Array.isArray(item.store_list.no_spec)) {
                specArr = specArr.concat(item.store_list.no_spec);
            } else {
                specArr.push(item.store_list.no_spec);
            }
        }
        return {
            ...item,
            store_list: {
                ...item.store_list,
                spec: specArr
            }
        }
    });
});

// 使用动态高度 hooks
const { dynamicHeight, updateHeight } = useDynamicHeight({
    containerRef: containerBoxRef,
    subtractRef: pointsBoxRef,
    extraHeight: 20 // 额外的间距
})

const popoClick = (row, item) => {
    if (row && row.id) {
        formModel.value.storeid = item.storeid
        formModel.value.id = row.id
        formModel.value.qty_min = Number(row.qty_min) || ''
        formModel.value.notes = row?.notes || ''
        editQtyRef.value.open()
    }
}

const warehouseFlowDrawerRef = ref(null)
const handleFlowClick = (row, item) => {
    warehouse_flow_info.value = row
    warehouse_flow_list_pfrom.value = 0
    warehouse_flow_shop_info.value = {}
    warehouse_flow_list.value = []
    warehouseFlow()
    warehouseFlowDrawerRef.value.open()
}

const open = async () => {
    ayjDrawerRef.value.open();
    setTimeout(() => {
        updateHeight()
    }, 100)
}

const handleClose = () => {
    ayjDrawerRef.value.close();
    editQtyRef.value.close()
}

onMounted(() => { })

defineExpose({
    open
})

</script>

<style lang="scss" scoped>
.shop_card_box {
    padding: 5px 10px 0;
    border-radius: 10px;
    border: 1px solid #E5E5E5;
}

::v-deep .el-dialog__body {
    padding: 10px 0 !important;
}

.container_box {
    box-sizing: border-box;
    border-radius: 10px;
    height: 100%;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
}
</style>
